<template>
  <div class="start-charge">
    <div class="time-box">
      <p>充电时长</p>
      <div class="time">{{ obj.chargeTime }}</div>
    </div>
    <div class="charge-info">
    <div class="item">
        <div class="item-left">订单编号：</div>
        <div class="item-right">{{ obj.order_No }}</div>
      </div>
      <div class="item">
        <div class="item-left">充电桩编号：</div>
        <div class="item-right">{{obj.chargePile }}</div>
      </div>
      <div class="item">
        <div class="item-left">地址</div>
        <div class="item-right">北京市昌平区南口镇充电站</div>
      </div>
      <div class="item">
        <div class="item-left">充电桩类型：</div>
        <div class="item-right">60KWH</div>
      </div>
    </div>
    <div class="btn" @click="timeStart">结束充电</div>
    <p class="balance">我的剩余电额：8电币 <span>充值</span></p>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  data() {
    return {
      obj: {}
    };
  },

    methods: {
        timeStart() {
            Dialog.confirm({
                title: '标题',
                message: '你确定要结束充电吗'
                })
                .then(() => {
                    Dialog.alert({
                    title: '标题',
                    message: '请听到枪口解锁声音，再拔枪。谢谢您的使用!祝您生活愉快!',
                    confirmButtonText: '去支付'
                    }).then(() => {
                        console.log("支付")
                        // this.$router.push({

                        // })
                    });
                })
                .catch(() => {
                    // on cancel
                    this.time = setInterval(this.timer, 50);
                });

            },
    },
    created() {
        console.log(this.$route.query.obj)
        this.obj = this.$route.query.obj
        console.log(this.obj)
    }
};
</script>

<style lang="sass" scoped>
.start-charge
    width: 100%
    .time-box
        margin-top: .8rem
        text-align: center
        p
            font-size: .24rem
        .time
            margin-top: .3rem
            font-size: .56rem
            font-weight: bold
    .charge-info
        width: 7rem
        margin: .5rem auto 0
        padding: .3rem
        box-sizing: border-box
        border: 1px solid #cdcdcd
        border-radius: 10px
        .item
            display: flex
            justify-content: space-between
            line-height: .6rem
            font-size: .28rem
    .btn
        width: 6rem
        height: .8rem
        margin: .5rem auto
        text-align: center
        line-height: .8rem
        background: #666
        color: #fff
    .balance
        text-align: center
        font-size: .28rem
        span
            padding: .05rem .1rem
            border: 1px solid #cdcdcd
            border-radius: 10px
</style>

